<template>
  <div>
    <van-nav-bar
      class="top"
      title="问题反馈"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="questionInfo">
      <div class="stem">
        <p class="text">
          <span class="type">{{ this.question_info.qtype }}</span
          >{{ this.question_info.stem }}
        </p>
        <div
          style="
            line-height: 8.75rem;
            display: inline-block;
            height: 8.75rem;
            margin-bottom: 2.125rem;
          "
          v-if="this.question_info.stem_img"
        >
          <img
            :src="this.question_info.stem_img"
            @click="openImg([this.question_info.stem_img])"
            style="height: 100%"
            alt=""
          />
        </div>
      </div>
      <div class="question">
        <van-radio-group v-if="this.question_info.qtype == '判断'">
          <template>
            <van-radio name="正确" class="pd"> 正确 </van-radio>
            <van-radio name="错误" class="pd"> 错误 </van-radio>
          </template>
        </van-radio-group>

        <van-radio-group
          v-if="
            this.question_info.qtype == '单选' ||
            this.question_info.qtype == '多选'
          "
        >
          <!--  -->
          <div v-for="(item, index) in this.$route.params.tiList" :key="index">
            <van-radio v-if="item.content" :name="item.cred">
              <span style="padding: 6px 0; display: inline-block"
                >{{ item.content
                }}<img
                  v-if="item.content_img"
                  style="max-width: 100px; max-height: 100px"
                  :src="item.content_img"
                  alt=""
              /></span>
              <template #icon="props">
                <template>
                  <img
                    class="img-icon"
                    :src="require(`@/assets/mobile/exam/${item.cred}.png`)"
                  />
                </template>
              </template>
            </van-radio>
          </div>
        </van-radio-group>
      </div>
    </div>

    <div
      style="
        font-size: 1rem;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #333333;
        margin-top: 0.93rem;
        margin-left: 0.75rem;
      "
    >
      问题反馈
    </div>
    <van-cell
      title="问题类型"
      @click="showType = true"
      is-link
      :value="istype"
    />
    <van-field
      class="message"
      v-model="errorInfo"
      rows="8"
      autosize
      type="textarea"
      placeholder="请输入您要反馈的试题问题？"
    />
    <van-popup v-model="showType" position="bottom" :style="{ height: '30%' }">
      <van-picker
        title="问题类型"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
    <div class="footer">
      <van-button @click="errorBack" :disabled="buttonLoad" type="info"
        >确定</van-button
      >
    </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import { feedbackQuestion } from "@/api/admin.js";
export default {
  data() {
    return {
      istype: "请选择问题类型",
      columns: ["题干缺失", "答案错误", "用户体验", "其他"],
      showType: false,
      errorInfo: "",
      buttonLoad: false,
    };
  },
  methods: {
    //图片放大
    openImg(img) {
      ImagePreview(img);
    },
    onCancel() {
      this.showType = false;
    },
    onConfirm(val) {
      this.showType = false;
      this.istype = val;
    },
    errorBack() {
      if (this.istype == "请选择问题类型") {
        return this.$toast("请选择问题类型");
      }
      // return console.log(this.question_info);
      if (this.errorInfo == "") {
        return this.$toast("反馈内容不得为空");
      }
      this.buttonLoad = true;
      feedbackQuestion({
        qtype: this.question_info.qtype,
        category: this.istype,
        question_id: this.$route.params.id,
        question_info: this.$route.params.question_info,
        reason: this.errorInfo,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast("问题已反馈!");
          this.buttonLoad = false;
          this.onClickLeft();
        }
      });
    },
    onClickLeft() {
      this.$router.replace({
        path: "/feedbackList",
      });
    },
    onClickRight() {},
  },
  created() {
    console.log(this.$route.params);
    this.question_info = JSON.parse(this.$route.params.question_info);
  },
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
::v-deep {
  .van-cell--clickable {
    border: 1px solid #dddddd;
    width: auto;
    margin: 0.75rem;
    border-radius: 0.25rem;
  }
  .questionInfo {
    background: #f5f5f5;
    width: auto;
    height: auto;
    margin: 0.75rem;
    padding: 0.75rem;
    .stem {
      // display: flex;
      // justify-content: flex-start;

      .text {
        .type {
          font-size: 0.75rem;
          display: inline-block;
          text-align: center;
          color: #fff;
          flex-shrink: 0;
          width: 2.43rem;
          height: 1.15rem;
          background: #327bff;
          border-radius: 0.68rem 0.68rem 0 0.68rem;
          margin-right: 0.62rem;
        }
        font-size: 1rem;
      }
    }
    .question {
      .van-radio__icon {
        height: auto;
        .img-icon {
          height: 2.25rem;
          width: 2.25rem;
        }
      }

      .pd {
        margin-top: 1.12rem;
      }
      font-size: 1rem;
    }
  }
  .footer {
    padding-bottom: 1.25rem;
    display: flex;
    justify-content: center;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    .van-button {
      background: #1571f7;
      width: 21.18rem;
    }
  }
  .top {
    background: #327bff;
    .van-nav-bar__content {
      .van-nav-bar__left {
        .van-nav-bar__arrow {
          color: #fff;
          font-size: 1.2rem;
          &:before {
            color: #fff !important;
          }
        }
      }
      .van-nav-bar__title {
        color: #fff;
      }
    }
  }
  .message {
    // padding: 0;
    border: 1px solid #ddd;
    width: auto;
    margin: 0 0.75rem 0.75rem;
    border-radius: 0.25rem;
    .van-field__value {
      // background: #f8f9fd;
    }
  }
}
</style>
